<script>
  export default {
    name: 'webchat-card-slot-filter',
    data () {
      return {
        renderControl: 20
      }
    },
    methods: {},
    props: ['tabType'],
    watch: {
      tabType: {
        handler () {
          let interVal
          this.renderControl = 20
          interVal = window.setInterval(() => {
            this.renderControl += 10
            if (this.$slots && this.$slots.default && this.renderControl > this.$slots.default.length) {
              window.clearInterval(interVal)
            }
          }, 10)
        },
        immediate: true
      }
    },
    render: function (h) {
      // console.log('times', this.renderControl, this.$slots.default.length)
      let slots = this.$slots.default || []
      slots = slots.map((ele, index) => {
        if (index > this.renderControl) {
          ele = h('div', {}, [h('div', {'class': {card: true}})])
        }
        return ele
      })
      return h(
        'div', {}, slots
      )
    }
  }
</script>

<style lang="stylus" scoped>
  .card
    padding 0 10px 0 25px
    box-sizing border-box
    width 100%
    height 76px
    border-bottom 1px solid $c-border1
    background-color $cf-white
    display flex
    cursor pointer
</style>
